<template>
    <el-from :rules="rules" class="login-container">
        <h3 class="login-title">系统登录</h3>
        <el-from-item prop="auname">
            <el-input type="text" placehoder="请输入登录账号" v-model="loginFrom.uname"></el-input>
        </el-from-item>
        <el-from-item prop="mypwd">
            <el-input type="password" placehoder="请输入登录密码" v-model="loginFrom.pwd"></el-input>
        </el-from-item>
        <el-checkbox class="login-rem" v-model="check">记住密码</el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-lable class="login wang">忘记密码</el-lable>
        <el-from-item>
            <el-buttom type="primary" style="width:100%">登&nbsp;&nbsp;录</el-buttom>
        </el-from-item>
    </el-from>
</template>

<script>
    export default {
        name:"login",
        data(){
            return{
                rules:{
                    auname: [
                        {required:true,message:"请输入账号信息",trigger:'blur'}                 
                    ],
                    mypwd: [
                        {required:true,message:"密码不能为空",trigger:'blur'}
                    ],
                },
                loginFrom:{
                    uname:"",
                    pwd:""
                },
               check: true
            }
        },
        methods:{
            mySub(loginFrom){
                console.log(loginFrom);
                this.$ref[loginFrom].validate((valid)=>{
                    if(valid){
                        alert("你已经进入系统");
                    }else{
                        alert("信息不正确，请重新输入！")
                    }
                });
            }
        }
    }
</script>

<style scoped>
.login-container{
    border-radius:15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border:1px solid #eaeaea;
    box-shadow:0 0 25px #cac6c6; 
}

.login title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
.login-rem{
    margin: 0px 0px 35px 0px;
    text-align: left;
}
.login-wang{
    margin: 15px 0px 35px 0px;
    text-align: left;
    font-size: small;
}
</style>